<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
<!--[if !IE]><!--><html lang="en-US"><!--<![endif]-->
<head>
<!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title> Karma &#8211; Premium Website Template</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/karma.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/karma-teal-grey.css" rel="stylesheet" type="text/css" />
<link href="css/_mobile.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="#"/>

</head>
<body>
<div id="wrapper">
<div id="header">
<div class="top-block">
<div class="top-holder">



<!-- ***************** - Top Toolbar Left Side - ***************** -->
 <div class="toolbar-left">
 <ul class="sub-menu">
 <li><a href="index-jquery-1.html">Home</a></li>
 <li><a href="template-sitemap.html">Sitemap</a></li>
 <li><a href="template-contact-iphone.html">Contact</a></li>
 <li>
 <a href="#">Purchase</a>
	 <ul class="sub-menu">
	 <li><a href="content-3d-effects.html">Amazing 3D effects</a></li>
	 <li><a href="content-code-snippets.html">100 Plus Shortcodes</a></li>
	 </ul> 
 </li>
 </ul></div><!-- end toolbar-left -->
 <!-- ***************** - END Top Toolbar Left Side - ***************** -->
 


<!-- ***************** - Top Toolbar Right Side - ***************** -->
<div class="toolbar-right">
    <ul>
    <li><a href="http://www.truethemes.net">www.truethemes.net</a></li>
    <li><a href="http://www.twitter.com/truethemes">@truethemes</a></li>
    </ul>
</div><!-- end toolbar-right -->
<!-- ***************** - END Top Toolbar Right Side - ***************** -->



</div><!-- end top-holder -->
</div><!-- end top-block -->




<div class="header-holder">
<div class="rays">
<div class="header-area">


<!-- ***************** - LOGO - ***************** -->
<a href="index-jquery-1.html" class="logo"><img src="http://s3.truethemes.net/theme-xml-content/html-karma/karma-logo.png" alt="Karma Responsive Website Template" /></a>
<!-- ***************** - END LOGO - ***************** -->




<!-- ***************** - Main Navigation - ***************** -->
<ul id="menu-main-nav">
<li class="current_page_item"><a href="content-3d-effects.html"><span><strong>Features</strong><span class="navi-description">about this theme</span></span></a>
<ul class="sub-menu">
	<li><a href="content-3d-effects.html"><span>Amazing 3D Effects</span></a></li>
	<li><a href="content-code-snippets.html"><span>100+ Code Snippets</span></a></li>
    <li><a href="content-pricing-tables.html"><span>Pricing Tables</span></a></li>
	<li><a href="content-20-page-layouts.html"><span>20 Page Layouts</span></a></li>
	<li><a href="content-20-color-variations.html"><span>20 Color Variations</span></a></li>
	<li class="current-menu-item"><a href="content-ajax-contact-form.html"><span>AJAX + PHP Contact Form</span></a></li>
	<li><a href="content-top-notch-support.html"><span>Top Notch Customer Support</span></a></li>
	</ul>
</li>

<li><a href="index-jquery-2.html"><span><strong>Pages</strong><span class="navi-description">layout templates</span></span></a>
<ul class="sub-menu">
 <li><a href="index-jquery-2.html"><span>Homepage &#8211; jQuery 2</span></a></li>
 <li><a href="index-video-left.html"><span>Homepage &#8211; Video Left</span></a></li>
 <li><a href="index-video-right.html"><span>Homepage &#8211; Video Right</span></a></li>
 <li><a href="index-3d-1.html"><span>Homepage &#8211; 3D 1</span></a></li>
 <li><a href="index-3d-2.html"><span>Homepage &#8211; 3D 2</span></a></li>
 <li><a href="template-leftnav.html"><span>Left Nav</span></a></li>
 <li><a href="template-leftnav-sidebar.html"><span>Left Nav + Sidebar</span></a></li>
 <li><a href="template-leftsidebar.html"><span>Left Sidebar + No Nav</span></a></li>
 <li><a href="template-leftsidebar-horizontal-nav.html"><span>Left Sidebar + Horizontal Nav</span></a></li>
 <li><a href="template-rightnav.html"><span>Right Nav</span></a></li>
 <li><a href="template-rightnav-sidebar.html"><span>Right Nav + Sidebar</span></a></li>
 <li><a href="template-rightsidebar.html"><span>Right Sidebar + No Nav</span></a></li>
 <li><a href="template-rightsidebar-horizontal-nav.html"><span>Right Sidebar + Horizontal Nav</span></a></li>
 <li><a href="template-fullwidth.html"><span>Full Width + No Nav</span></a></li>
 <li><a href="template-fullwidth-horizontal-nav.html"><span>Full Width + Horizontal Nav</span></a></li>
 <li><a href="template-contact-iphone.html"><span>Contact Page (iPhone)</span></a></li>
 <li><a href="template-contact-google-map.html"><span>Contact Page (Google map)</span></a></li>
 <li><a href="template-sitemap.html"><span>Sitemap</span></a></li>
 <li><a href="template-404error.html"><span>404 Error Page</span></a></li></ul>
</li>

<li><a href="_demo-colors/color-autumn.html"><span><strong>Styles</strong><span class="navi-description">color variations</span></span></a>
<ul class="sub-menu">
	<li><a href="_demo-colors/color-autumn.html"><span>Autumn</span></a></li>
	<li><a href="_demo-colors/color-black.html"><span>Black</span></a></li>
	<li><a href="_demo-colors/color-bluegrey.html"><span>Blue Grey</span></a></li>
	<li><a href="_demo-colors/color-cherry.html"><span>Cherry</span></a></li>
	<li><a href="_demo-colors/color-coffee.html"><span>Coffee</span></a></li>
	<li><a href="_demo-colors/color-coolblue.html"><span>Cool Blue</span></a></li>
	<li><a href="_demo-colors/color-fire.html"><span>Fire</span></a></li>
	<li><a href="_demo-colors/color-forestgreen.html"><span>Forest Green</span></a></li>
	<li><a href="_demo-colors/color-golden.html"><span>Golden</span></a></li>
	<li><a href="_demo-colors/color-grey.html"><span>Grey</span></a></li>
	<li><a href="_demo-colors/color-limegreen.html"><span>Lime Green</span></a></li>
	<li><a href="_demo-colors/color-periwinkle.html"><span>Periwinkle</span></a></li>
	<li><a href="_demo-colors/color-pink.html"><span>Pink</span></a></li>
	<li><a href="_demo-colors/color-purple.html"><span>Purple</span></a></li>
	<li><a href="_demo-colors/color-royalblue.html"><span>Royal Blue</span></a></li>
	<li><a href="_demo-colors/color-silver.html"><span>Silver</span></a></li>
	<li><a href="_demo-colors/color-skyblue.html"><span>Sky Blue</span></a></li>
	<li><a href="_demo-colors/color-teal.html"><span>Teal</span></a></li>
	<li><a href="_demo-colors/color-tealgrey.html"><span>Teal Grey</span></a></li>
	<li><a href="_demo-colors/color-violet.html"><span>Violet</span></a></li></ul>
</li>

<li><a href="template-gallery-3d.html"><span><strong>Gallery</strong><span class="navi-description">videos &amp; images</span></span></a>
<ul class="sub-menu">
	<li><a href="template-gallery-3d.html"><span>3D Gallery</span></a></li>
<li><a href="template-gallery-4-columns.html"><span>4 Column Gallery</span></a></li>
<li><a href="template-gallery-3-columns.html"><span>3 Column Gallery</span></a></li>
<li><a href="template-gallery-3-columns-portrait.html"><span>3 Column Gallery Portraits</span></a></li>
<li><a href="template-gallery-2-columns.html"><span>2 Column Gallery</span></a></li>
<li><a href="template-gallery-1-column.html"><span>1 Column Gallery</span></a></li>
<li><a href="template-gallery-1-column-portrait.html"><span>1 Column Gallery Portraits</span></a></li></ul>

</li>

<li><a href="template-blog.html"><span><strong>Blog</strong><span class="navi-description">articles &amp; ideas</span></span></a></li></ul>
<!-- ***************** - END Main Navigation - ***************** -->




</div><!-- header-area -->
</div><!-- end rays -->
</div><!-- end header-holder -->
</div><!-- end header -->
 
 

 
<div id="main">
<div class="main-area">

<!-- ***************** - START Title Bar - ***************** -->
<div class="tools">
<div class="holder">
<div class="frame">
<h1>AJAX + PHP Contact Form</h1>

<form class="search-form" action="#" method="get">
	<fieldset>
		<span class="text">	
			<input type="text" onblur="this.value=(this.value=='') ? 'Search' : this.value;" onfocus="this.value=(this.value=='Search') ? '' : this.value;" value="Search" class="s" name="s">
            <input type="submit" class="searchsubmit" value="search">
		</span>
	</fieldset>
</form>


<p class="breadcrumb"><a href="index-jquery-1.html">Home</a><a href="content-3d-effects.html">Features</a><span class='current_crumb'>AJAX + PHP Contact Form</span></p></div><!-- end frame -->

</div><!-- end holder -->
</div><!-- end tools -->
<!-- ***************** - END Title Bar - ***************** -->




<div class="main-holder">

<!-- ***************** - START sub-nav - ***************** -->
<div id="sub_nav">
<ul class="sub-menu">
<li><a href="content-3d-effects.html"><span>Amazing 3D Effects</span></a></li>
<li><a href="content-code-snippets.html"><span>100+ Code Snippets</span></a></li>
<li><a href="content-pricing-tables.html"><span>Pricing Tables</span></a></li>
<li><a href="content-20-page-layouts.html"><span>20 Page Layouts</span></a></li>
<li><a href="content-20-color-variations.html"><span>20 Color Variations</span></a></li>
<li class="current_page_item"><a href="content-ajax-contact-form.html"><span>AJAX + PHP Contact Form</span></a></li>
<li><a href="content-top-notch-support.html"><span>Top Notch Customer Support</span></a></li>
</ul>
</div><!-- end sub_nav -->

<!-- ***************** - END sub-nav - ***************** -->



<!-- ***************** - START Content - ***************** -->
<div id="content">



<p><img width="720" height="59" alt="Website Template" src="http://s3.truethemes.net/theme-xml-content/html-karma/premium-website-template-30.jpg" /></p>

<p><img width="720" height="297" alt="Web CMS Template" src="http://s3.truethemes.net/theme-xml-content/html-karma/premium-website-template-31.jpg" /></p>

<div class="callout-wrap"><span>Karma comes packed with a powerful AJAX + PHP contact form. It's an absolute breeze to create new fields, and your customers' will love the kick-awesome form validation.</span></div><!-- end callout-wrap -->



</div><!-- end content -->

<!-- ***************** - END content - ***************** -->


		
</div><!-- end main-holder -->
</div><!-- main-area -->






<!-- ***************** - Top Footer - ***************** --> 
<div id="footer">
<div class="footer-area">
<div class="footer-wrapper">
<div class="footer-holder">


<!-- /***************** - Footer Content Starts Here - ***************** --> 
<div class="one_fourth">
 <h3>Latest from the Blog</h3>
 <div class="footer_post">
 <h4><a href="template-blog-full-post.html">Blog Post 1</a></h4>
 <p><a href="template-blog-full-post.html">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet...</a></p>
 </div><!-- end footer_post -->

 <div class="footer_post">
 <h4><a href="template-blog-full-post.html">Blog Post 2</a></h4>
 <p><a href="template-blog-full-post.html">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet...</a></p>
 </div><!-- end footer_post -->
</div><!-- end first one_fourth_column -->



<div class="one_fourth">
 <h3>Useful Links</h3>
 <ul class="blogroll">
 <li><a href="content-code-snippets.html"><img src="http://s3.truethemes.net/theme-xml-content/wp-karma/footer-useful-link.png" alt="" title="" />Click Here</a>
 to check out the over 100 built in code snippets.</li>
 </ul>
</div><!-- end second one_fourth_column -->



<div class="one_fourth">
<h3>Follow Us</h3>
<ul class="social_icons">
<li><a href="#" class="rss">rss</a></li>
<li><a href="http://www.twitter.com/truethemes" class="twitter">Twitter</a></li>
<li><a href="http://www.facebook.com/truethemes" class="facebook">Facebook</a></li>
<li><a href="#" class="flickr">Flickr</a></li>
<li><a href="#" class="youtube">YouTube</a></li>
<li><a href="#" class="linkedin">LinkedIn</a></li>
<li><a href="#" class="foursquare">FourSquare</a></li>
<li><a href="#" class="delicious">Delicious</a></li>
<li><a href="#" class="digg">Digg</a></li>
<li><a href="#" class="google">Google +</a></li>
<!-- <li><a href="#" class="email">Email</a></li> -->
</ul>

</div><!-- end third one_fourth_column -->




<div class="one_fourth_last">
<h3>Join our Crew</h3>
<div id="mc_signup">
<form method="post" action="http://truethemes.us2.list-manage1.com/subscribe/post?u=e2deed44e98de9950b14e7fb3&amp;id=47d7d9240b" id="mc_signup_form">
<p><input type="hidden" id="mc_submit_type" name="mc_submit_type" value="html" />
<input type="hidden" name="mcsf_action" value="mc_submit_signup_form" />
<input type="hidden" id="_mc_submit_signup_form_nonce" name="_mc_submit_signup_form_nonce" value="93e0dda974" />
<label for="mce-EMAIL" class="mc_var_label">Email Address:</label>
<br />
<input type="text" size="18" value="" name="EMAIL" id="mce-EMAIL" class="mc_input"/></p>

<p><br /><input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="Subscribe" class="button" /></p>
</form>
</div><!-- end mc_signup -->
</div><!-- end fourth one_fourth_column -->

<!-- ***************** - END Footer Content - ***************** --> 




</div><!-- footer-holder -->
</div><!-- end footer-wrapper -->
</div><!-- end footer-area -->
</div><!-- end footer -->


<!-- /***************** - END Top Footer Area - ***************** --> 






<!-- /***************** - Bottom Footer - ***************** --> 

<div id="footer_bottom">
 <div class="info">
 <div id="foot_left"><p>Copyright &copy; 2011 Your Company Name. All rights reserved.</p>
 </div><!-- end foot_left -->
 
 
 <div id="foot_right">
 <div class="top-footer"><a href="#" class="link-top">top</a></div>
 
 <ul>
 <li><a href="index-jquery-1.html">Home</a></li>
 <li><a href="template-sitemap.html">Sitemap</a></li>
 <li><a href="template-contact-iphone.html">Contact</a></li>
 <li><a href="template-blog.html">Blog</a></li>
 <li><a href="http://themeforest.net/item/karma-clean-and-modern-website-template/234990">Purchase</a></li>
 </ul>
 </div><!-- end foot_right -->
 </div><!-- end info -->
</div><!-- end footer_bottom -->

<!-- /***************** - END Bottom Footer - ***************** --> 




</div></div>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/jquery-1-slider.js"></script>
<script type="text/javascript" src="js/testimonial-slider.js"></script>
</body>
</html>